<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="title" v-if="!openid">用户注册</view>
				<view class="title" v-else>完善信息</view>
				<view class="card">
					<!-- 表单内容 -->
					<wd-form ref="formRef" :model="formData" :rules="formRules">
						<view class="item">
							<wd-radio-group checked-color="#c91c1f" shape="dot" v-if="openid"
								v-model="formData.is_haved" @change="havedChange" inline>
								<wd-radio :value="0">无账号</wd-radio>
								<wd-radio :value="1">有账号</wd-radio>
							</wd-radio-group>
						</view>
						<!-- <wd-input :use-prefix-slot="true" custom-class="wd-input-custom-class-fd-col round" label="手机号"
							prop="phone" clearable v-model="formData.phone" placeholder="请输入手机号">
							<template #prefix>
								<text class="iconfont icon-shoujihaoma"></text>
							</template>
						</wd-input> -->
						<wd-input :use-prefix-slot="true" custom-class="wd-input-custom-class-fd-col round" label="手机号"
							prop="phone" clearable v-model="formData.phone" placeholder="请输入手机号">
							<template #prefix>
								<text class="iconfont icon-shoujihaoma"></text>
							</template>
						</wd-input>
						<wd-input v-if="formData.is_haved == 0" :use-prefix-slot="true"
							custom-class="wd-input-custom-class-fd-col round" label="密码" prop="password" show-password
							clearable v-model="formData.password" placeholder="请输入密码">
							<template #prefix>
								<text class="iconfont icon-mima"></text>
							</template>
						</wd-input>
						<wd-input v-if="formData.is_haved == 0" :use-prefix-slot="true"
							custom-class="wd-input-custom-class-fd-col round" label="确认密码" prop="rePassword"
							show-password clearable v-model="formData.rePassword" placeholder="请输入确认密码">
							<template #prefix>
								<text class="iconfont icon-mima"></text>
							</template>
						</wd-input>
						<wd-input :use-prefix-slot="true" :use-suffix-slot="true"
							custom-class="wd-input-custom-class-fd-col round" label="验证码" prop="code" clearable
							v-model="formData.code" placeholder="请输入验证码">
							<template #prefix>
								<text class="iconfont icon-yanzhengma"></text>
							</template>
							<template #suffix>
								<wd-button :disabled="status === 2" type="text" @click="getVerificationCode"
									custom-class="wd-button-custom-class-verification-code wd-button-custom-class-link">
									{{ tips }}
								</wd-button>
							</template>
						</wd-input>
						<view class="submit-btn">
							<wd-button v-if="!openid" type="success"
								custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100"
								@click="doRegister">完成注册</wd-button>
							<wd-button type="success" v-if="openid"
								custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100"
								@click="doWxInfo">完善信息</wd-button>
						</view>
					</wd-form>
				</view>
				<view class="login" @click="goLogin">已有账号去登录？</view>
				<view class="protocol">
					<wd-checkbox checked-color="rgba(201, 28, 31, 1)" :modelValue="protocol" @change="checkboxChange"
						shape="square">
						请阅读并同意
						<text class="wd-button-custom-class-link" @click="goProtocolPage">《隐私协议和用户协议》</text>
					</wd-checkbox>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import useVerificationCode from '@/hooks/useVerificationCode.ts';
	import useRouter from '@/hooks/useRouter.ts';
	import useRegister from './useRegister';
	import { onLoad } from "@dcloudio/uni-app"
	import { regeister as regApi } from "@/commonPage/api";
	import { doWxInformation } from "@/api/wx.js"
	import { useUserStore } from "@/store";
	export default defineComponent({
		name: '注册',
		setup(props, ctx) {
			const router = useRouter();
			// 验证码 hooks 方法 tips 提示语 ， status 状态， getVerificationCode 获取验证码方法
			const { tips, status, getVerificationCode } = useVerificationCode(60, 1000, ['获取验证码', '秒后重新获取', '重新获取']);
			// 注册页面部分逻辑
			const register = useRegister();
			// 日间light、夜间dark主题
			const theme = ref('light');
			// 表单 Ref
			const formRef = ref();
			const openid = ref(null);
			const userStore = useUserStore();
			onLoad((params) => {
				if (params.openid) {
					openid.value = params.openid;
					register.formData.value['is_haved'] = 1;
					register.formData.value = {
						phone: '', // 电话
						code: '', // 验证码
						is_haved: 1,
					}
					register.formRules.value = {
						phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }], // 手机号校验
						code: [{ required: true, message: '请输入验证码', trigger: 'blur' }] // 验证码
					}
				}
			})
			const havedChange = (e) => {
				if (e.value == 1) {
					register.formData.value = {
						phone: '', // 电话
						code: '', // 验证码
						is_haved: 1,
					}
					register.formRules.value = {
						phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }], // 手机号校验
						code: [{ required: true, message: '请输入验证码', trigger: 'blur' }] // 验证码
					}
				} else {
					register.formData.value = {
						phone: '', // 电话
						code: '', // 验证码
						password: '', // 密码
						rePassword: '', // 确认密码
						is_haved: 0,
					}
					register.formRules.value = {
						phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }], // 手机号校验
						password: [{ required: true, message: '请输入密码', trigger: 'blur' }], // 密码
						rePassword: [
							{
								required: true,
								message: '请输入确认密码',
								trigger: 'blur',
								validator: (value : any) => {
									if (value !== register.formData.value.password) {
										return Promise.reject('确认密码与密码不一致');
									}
									return Promise.resolve();
								}
							}
						], // 确认密码
						code: [{ required: true, message: '请输入验证码', trigger: 'blur' }] // 验证码
					}
				}
			}
			const doWxInfo = () => {
				if (!register.protocol.value) {
					uni.$wdToast.error('请阅读并同意隐私协议和用户协议');
					return;
				}
				doWxInformation({
					openid: openid.value,
					...register.formData.value,
					yzm: register.formData.value.code, // 获取密码，进行注册操作，例如调用接口进行注册操作。
					repassword: register.formData.value.rePassword
				}).then(res => {
					if (res.token) {
						uni.$wdToast.show('登录成功');
						userStore.setToken(res.token, res.user_id);
						register.router.switchTab('/pages/index/index');
					}
				})
			}
			const doRegister = () => {
				if (!register.protocol.value) {
					uni.$wdToast.error('请阅读并同意隐私协议和用户协议');
					return;
				}
				formRef.value
					.validate()
					.then(({ valid, errors } : { [key : string] : any }) => {
						if (valid) {
							regApi({
								phone: register.formData.value.phone, // 获取手机号，进行注册操作，例如调用接口进行注册操作。
								password: register.formData.value.password, // 获取密码，进行注册操作，例如调用接口进行注册操作。0
								repassword: register.formData.value.rePassword, // 获取密码，进行注册操作，例如调用接口进行注册操作。
								yzm: register.formData.value.code, // 获取密码，进行注册操作，例如调用接口进行注册操作。
								// ...register.formData.value, // 获取表单数据，进行注册操作，例如调用接口进行注册操作。
							}).then(res => {
								uni.$wdToast.success('注册成功');
								setTimeout(() => {
									register.goLogin();
								}, 2000)
							});
						}
					})
					.catch((error : string) => {
					});
			};
			return {
				theme,
				formRef,
				tips,
				status,
				getVerificationCode,
				doRegister,
				openid,
				havedChange,
				doWxInfo,
				...register
			};
		}
	});
</script>

<style lang="less" scoped>
	.container {
		.title {
			font-family: PingFang;
			font-weight: bold;
			font-size: 50rpx;
			color: #000000;
			padding-top: 60rpx;
			padding-bottom: 60rpx;
			text-align: center;
		}

		.card {
			margin: 0 auto;
			width: 600rpx;
			min-height: 200rpx;
			background: #fff;

			border-radius: 25rpx;
			box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
			overflow: hidden;

			.wd-form {
				padding: 24rpx 50rpx;
			}

			.item {
				padding: 24rpx;

				/deep/.is-checked .wd-radio__shape {
					background-color: #c91c1f;
					border-color: #c91c1f;
				}
			}

			.wd-input.is-cell {
				padding: 10px 0;
			}

			.submit-btn {
				margin-top: 33rpx;
				padding-bottom: 60rpx;
				padding: 0 24rpx 60rpx;
			}
		}

		.protocol {
			padding-top: 68rpx;
			padding-bottom: 23rpx;
			text-align: center;

			:deep(.wd-checkbox) {
				.wd-checkbox__shape {
					width: 26rpx !important;
					height: 26rpx !important;
				}

				.wd-checkbox__label {
					font-family: PingFang;
					font-weight: bold;
					font-size: 22rpx;
					color: #666666;
				}
			}

			.wd-button-custom-class-link {
				font-family: PingFang;
				font-weight: bold;
				font-size: 22rpx;
			}
		}

		.login {
			font-family: PingFang;
			font-weight: bold;
			font-size: 33rpx;
			color: #666666;
			text-align: center;
			padding-top: 63rpx;
		}
	}
</style>